<template>
    <a-modal
            :title="title"
            :visible="visible"
            :confirm-loading="confirmLoading"
            @ok="handleOk"
            :width="width"
            @cancel="handleCancel"
    >
        <a-form :form="form" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-form-item class="up-ant-form-item" v-for="(item, key) in formConfig" :label="item.label" :key="key">
                <pictureUpload v-if="item.type === 'upload'"/>
                <a-tree-select
                        v-else-if="item.type === 'treeSelect'"
                        v-decorator="[item.prop, { rules: item.rules, initialValue: defaultData[item.prop] }]"
                        style="width: 100%"
                        :tree-data="item.options"
                        :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                        placeholder="请选择"
                />
                <a-date-picker style="width: 100%;" v-else-if="item.type === 'date'" v-decorator="[item.prop, { rules: item.rules, initialValue: defaultData[item.prop] }]" />
                <a-input
                        v-else
                        v-decorator="[item.prop, { rules: item.rules, initialValue: defaultData[item.prop] }]"
                />
            </a-form-item>
        </a-form>
    </a-modal>
</template>

<script>
    import pictureUpload from '../pictureUpload'
    export default {
        name: "index",
        components: {
            pictureUpload
        },
        props: {
            width: {
                default: () => 520
            },
            confirm: {
                type: Function,
                default: () => {}
            },
            labelCol: {
                type: Object,
                default: () => {
                    return {
                        span: 6
                    }
                }
            },
            wrapperCol: {
                type: Object,
                default: () => {
                    return {
                        span: 18
                    }
                }
            },
            formConfig: {
                type: Array,
                default: () => []
            }
        },
        data() {
            return{
                title: '',
                visible: false,
                confirmLoading: false,
                form: this.$form.createForm(this, {}),
                defaultData: {},
            }
        },
        methods: {
            showModel({title, data=null}) {
                this.title = title;
                this.visible = true;
                this.defaultData = data || {}
            },
            handleCancel() {
                this.visible = false;
                this.confirmLoading = false;
                this.form.resetFields();
            },
            handleOk(e) {
                e.preventDefault();
                this.form.validateFields((err, values) => {
                    if (!err) {
                        this.confirmLoading = true;
                        this.confirm(values, this.handleCancel);
                    }
                });
            }
        }
    }
</script>

<style>
.up-ant-form-item{
    margin-bottom: 4px!important;
}
</style>